<template>
  <C_Layout
    :notification-count="notificationCount"
    @user-click="handleUserClick"
    @notification-click="handleNotificationClick"
    @settings-click="handleSettingsClick"
    @tab-change="handleTabChange"
  >
    <view class="profile-page">
      <!-- 快捷操作 -->
      <view class="quick-actions">
        <view 
          class="action-item"
          v-for="(action, index) in quickActions"
          :key="index"
          @click="handleQuickAction(action)"
        >
          <view class="action-icon" :class="action.iconClass">
            <C_Icon :name="action.icon" :size="20" color="white" />
          </view>
          <text class="action-label">{{ action.label }}</text>
        </view>
      </view>

      <!-- 我的服务 -->
      <view class="services-section">
        <view class="section-header">
          <text class="section-title">我的服务</text>
          <text class="section-more" @click="handleViewMore('services')">更多</text>
        </view>
        <view class="services-grid">
          <view 
            class="service-item"
            v-for="(service, index) in services"
            :key="index"
            @click="handleServiceClick(service)"
          >
            <view class="service-icon" :class="service.iconClass">
              <C_Icon :name="service.icon" :size="24" color="white" />
            </view>
            <text class="service-title">{{ service.title }}</text>
            <view class="service-badge" v-if="service.badge">
              <text>{{ service.badge }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 账户与安全 -->
      <view class="account-section">
        <view class="section-header">
          <text class="section-title">账户与安全</text>
        </view>
        <view class="account-list">
          <view 
            class="account-item"
            v-for="(item, index) in accountItems"
            :key="index"
            @click="handleAccountClick(item)"
          >
            <view class="account-left">
              <view class="account-icon" :class="item.iconClass">
                <C_Icon :name="item.icon" :size="18" color="white" />
              </view>
              <view class="account-info">
                <text class="account-title">{{ item.title }}</text>
                <text class="account-desc">{{ item.desc }}</text>
              </view>
            </view>
            <view class="account-right">
              <text class="account-value" v-if="item.value">{{ item.value }}</text>
              <view class="account-arrow">
                <C_Icon name="i-mdi-chevron-right" :size="16" color="#999" />
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 应用设置 -->
      <view class="settings-section">
        <view class="section-header">
          <text class="section-title">应用设置</text>
        </view>
        <view class="settings-list">
          <view 
            class="setting-item"
            v-for="(setting, index) in appSettings"
            :key="index"
            @click="handleSettingClick(setting)"
          >
            <view class="setting-left">
              <view class="setting-icon" :class="setting.iconClass">
                <C_Icon :name="setting.icon" :size="18" color="white" />
              </view>
              <text class="setting-title">{{ setting.title }}</text>
            </view>
            <view class="setting-right">
              <switch 
                v-if="setting.type === 'switch'"
                :checked="setting.value"
                @change="handleSwitchChange(setting, $event)"
                color="#007aff"
              />
              <text v-else-if="setting.value" class="setting-value">{{ setting.value }}</text>
              <view class="setting-arrow">
                <C_Icon name="i-mdi-chevron-right" :size="16" color="#999" />
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 关于与帮助 -->
      <view class="help-section">
        <view class="section-header">
          <text class="section-title">关于与帮助</text>
        </view>
        <view class="help-list">
          <view 
            class="help-item"
            v-for="(item, index) in helpItems"
            :key="index"
            @click="handleHelpClick(item)"
          >
            <view class="help-icon" :class="item.iconClass">
              <C_Icon :name="item.icon" :size="18" color="white" />
            </view>
            <text class="help-title">{{ item.title }}</text>
            <view class="help-arrow">
              <C_Icon name="i-mdi-chevron-right" :size="16" color="#999" />
            </view>
          </view>
        </view>
      </view>
    </view>
  </C_Layout>
</template>

<script setup>
import { ref } from 'vue'

const notificationCount = ref(3)

// 快捷操作
const quickActions = ref([
  {
    icon: 'i-mdi-qrcode',
    iconClass: 'blue-icon',
    label: '扫一扫',
    key: 'qrcode'
  },
  {
    icon: 'i-mdi-share',
    iconClass: 'green-icon',
    label: '分享应用',
    key: 'share'
  },
  {
    icon: 'i-mdi-message',
    iconClass: 'orange-icon',
    label: '意见反馈',
    key: 'feedback'
  },
  {
    icon: 'i-mdi-bookmark',
    iconClass: 'purple-icon',
    label: '我的收藏',
    key: 'bookmarks'
  }
])

// 我的服务
const services = ref([
  {
    icon: 'i-mdi-file-document',
    iconClass: 'blue-icon',
    title: '我的文档',
    key: 'documents'
  },
  {
    icon: 'i-mdi-clock',
    iconClass: 'purple-icon',
    title: '使用记录',
    key: 'history'
  },
  {
    icon: 'i-mdi-cloud-sync',
    iconClass: 'green-icon',
    title: '数据同步',
    key: 'sync'
  },
  {
    icon: 'i-mdi-star',
    iconClass: 'yellow-icon',
    title: '我的评分',
    key: 'ratings'
  },
  {
    icon: 'i-mdi-backup-restore',
    iconClass: 'orange-icon',
    title: '备份恢复',
    key: 'backup'
  },
  {
    icon: 'i-mdi-chart-line',
    iconClass: 'red-icon',
    title: '使用统计',
    key: 'analytics'
  }
])

// 账户与安全
const accountItems = ref([
  {
    icon: 'i-mdi-account-circle',
    iconClass: 'blue-icon',
    title: '个人信息',
    desc: '头像、昵称等个人信息',
    key: 'profile'
  },
  {
    icon: 'i-mdi-shield-check',
    iconClass: 'green-icon',
    title: '账号安全',
    desc: '密码、手机号等安全设置',
    key: 'security'
  },
  {
    icon: 'i-mdi-lock',
    iconClass: 'orange-icon',
    title: '隐私设置',
    desc: '数据权限、隐私保护',
    key: 'privacy'
  },
  {
    icon: 'i-mdi-credit-card',
    iconClass: 'purple-icon',
    title: '支付方式',
    desc: '银行卡、支付宝等',
    value: '已绑定2张',
    key: 'payment'
  }
])

// 应用设置
const appSettings = ref([
  {
    icon: 'i-mdi-bell',
    iconClass: 'blue-icon',
    title: '推送通知',
    type: 'switch',
    value: true,
    key: 'notifications'
  },
  {
    icon: 'i-mdi-theme-light-dark',
    iconClass: 'purple-icon',
    title: '深色模式',
    type: 'switch',
    value: false,
    key: 'darkMode'
  },
  {
    icon: 'i-mdi-translate',
    iconClass: 'green-icon',
    title: '语言设置',
    value: '中文简体',
    key: 'language'
  },
  {
    icon: 'i-mdi-cached',
    iconClass: 'orange-icon',
    title: '清除缓存',
    value: '128MB',
    key: 'cache'
  }
])

// 关于与帮助
const helpItems = ref([
  {
    icon: 'i-mdi-help-circle',
    iconClass: 'blue-icon',
    title: '帮助中心',
    key: 'help'
  },
  {
    icon: 'i-mdi-phone',
    iconClass: 'green-icon',
    title: '联系客服',
    key: 'contact'
  },
  {
    icon: 'i-mdi-information',
    iconClass: 'orange-icon',
    title: '关于我们',
    key: 'about'
  },
  {
    icon: 'i-mdi-file-document',
    iconClass: 'purple-icon',
    title: '用户协议',
    key: 'terms'
  }
])

// 事件处理函数
const handleUserClick = () => {
  uni.showToast({ title: '查看用户资料', icon: 'none' })
}

const handleNotificationClick = () => {
  uni.showToast({ title: `有${notificationCount.value}条新通知`, icon: 'none' })
}

const handleSettingsClick = () => {
  uni.showToast({ title: '打开设置', icon: 'none' })
}

const handleTabChange = ({ item, index }) => {
  console.log('切换到:', item.text, '索引:', index)
}

const handleQuickAction = (action) => {
  switch (action.key) {
    case 'qrcode':
      uni.scanCode({
        success: (res) => {
          uni.showToast({ title: `扫描结果: ${res.result}`, icon: 'none' })
        }
      })
      break
    case 'share':
      uni.share({
        provider: 'weixin',
        scene: 'WXSceneSession',
        type: 0,
        href: 'https://your-app.com',
        title: '推荐一个好用的应用',
        summary: '快来试试这个应用吧',
        imageUrl: '/static/images/share.png'
      })
      break
    case 'feedback':
      uni.navigateTo({ url: '/pages/feedback/index' })
      break
    case 'bookmarks':
      uni.navigateTo({ url: '/pages/bookmarks/index' })
      break
    default:
      uni.showToast({ title: `${action.label}功能开发中`, icon: 'none' })
  }
}

const handleViewMore = (type) => {
  uni.showToast({ title: `查看更多${type}`, icon: 'none' })
}

const handleServiceClick = (service) => {
  switch (service.key) {
    case 'documents':
      uni.navigateTo({ url: '/pages/documents/index' })
      break
    case 'history':
      uni.navigateTo({ url: '/pages/history/index' })
      break
    case 'sync':
      uni.showLoading({ title: '同步中...' })
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({ title: '同步完成', icon: 'success' })
      }, 2000)
      break
    case 'ratings':
      uni.navigateTo({ url: '/pages/ratings/index' })
      break
    case 'backup':
      uni.navigateTo({ url: '/pages/backup/index' })
      break
    case 'analytics':
      uni.navigateTo({ url: '/pages/analytics/index' })
      break
    default:
      uni.showToast({ title: `${service.title}功能开发中`, icon: 'none' })
  }
}

const handleAccountClick = (item) => {
  switch (item.key) {
    case 'profile':
      uni.navigateTo({ url: '/pages/profile/edit' })
      break
    case 'security':
      uni.navigateTo({ url: '/pages/profile/security' })
      break
    case 'privacy':
      uni.navigateTo({ url: '/pages/profile/privacy' })
      break
    case 'payment':
      uni.navigateTo({ url: '/pages/payment/index' })
      break
  }
}

const handleSettingClick = (setting) => {
  if (setting.type !== 'switch') {
    switch (setting.key) {
      case 'language':
        uni.navigateTo({ url: '/pages/settings/language' })
        break
      case 'cache':
        uni.showModal({
          title: '清除缓存',
          content: '确定要清除所有缓存吗？',
          success: (res) => {
            if (res.confirm) {
              uni.showToast({ title: '缓存清除成功', icon: 'success' })
            }
          }
        })
        break
    }
  }
}

const handleSwitchChange = (setting, event) => {
  setting.value = event.detail.value
  uni.showToast({ 
    title: `${setting.title}已${setting.value ? '开启' : '关闭'}`, 
    icon: 'none' 
  })
}

const handleHelpClick = (item) => {
  switch (item.key) {
    case 'help':
      uni.navigateTo({ url: '/pages/help/index' })
      break
    case 'contact':
      uni.navigateTo({ url: '/pages/contact/index' })
      break
    case 'about':
      uni.navigateTo({ url: '/pages/about/index' })
      break
    case 'terms':
      uni.navigateTo({ url: '/pages/terms/index' })
      break
  }
}
</script>

<style lang="scss" scoped>
.profile-page {
  min-height: 100vh;
  background-color: #f5f6fa;
  padding: 20rpx;
}

// 快捷操作
.quick-actions {
  display: flex;
  background: white;
  border-radius: 16rpx;
  padding: 30rpx 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.action-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.95);
  }
}

.action-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12rpx;
  
  &.blue-icon { background: linear-gradient(135deg, #007aff, #0056d3); }
  &.green-icon { background: linear-gradient(135deg, #28a745, #1e7e34); }
  &.orange-icon { background: linear-gradient(135deg, #fd7e14, #e55a00); }
  &.purple-icon { background: linear-gradient(135deg, #6f42c1, #563d7c); }
}

.action-label {
  color: #333;
  font-size: 24rpx;
  text-align: center;
}

// 通用部分样式
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
  padding: 0 8rpx;
}

.section-title {
  color: #333;
  font-size: 28rpx;
  font-weight: 600;
}

.section-more {
  color: #007aff;
  font-size: 24rpx;
}

// 我的服务
.services-section {
  margin-bottom: 20rpx;
}

.services-grid {
  background: white;
  border-radius: 16rpx;
  padding: 20rpx;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.95);
  }
}

.service-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12rpx;
  
  &.blue-icon { background: linear-gradient(135deg, #007aff, #0056d3); }
  &.red-icon { background: linear-gradient(135deg, #dc3545, #c82333); }
  &.green-icon { background: linear-gradient(135deg, #28a745, #1e7e34); }
  &.orange-icon { background: linear-gradient(135deg, #fd7e14, #e55a00); }
  &.purple-icon { background: linear-gradient(135deg, #6f42c1, #563d7c); }
  &.yellow-icon { background: linear-gradient(135deg, #ffc107, #e0a800); }
}

.service-title {
  color: #333;
  font-size: 24rpx;
  text-align: center;
}

.service-badge {
  position: absolute;
  top: -8rpx;
  right: 8rpx;
  background: #dc3545;
  color: white;
  font-size: 20rpx;
  padding: 4rpx 8rpx;
  border-radius: 10rpx;
  min-width: 16rpx;
  text-align: center;
}

// 列表样式（账户、设置、帮助共用）
.account-section,
.settings-section,
.help-section {
  margin-bottom: 20rpx;
}

.account-list,
.settings-list,
.help-list {
  background: white;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.account-item,
.setting-item,
.help-item {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  transition: all 0.3s ease;
  
  &:last-child {
    border-bottom: none;
  }
  
  &:active {
    background: #f8f9fa;
  }
}

// 账户项目
.account-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.account-icon {
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  
  &.blue-icon { background: linear-gradient(135deg, #007aff, #0056d3); }
  &.green-icon { background: linear-gradient(135deg, #28a745, #1e7e34); }
  &.orange-icon { background: linear-gradient(135deg, #fd7e14, #e55a00); }
  &.purple-icon { background: linear-gradient(135deg, #6f42c1, #563d7c); }
}

.account-info {
  flex: 1;
}

.account-title {
  display: block;
  color: #333;
  font-size: 28rpx;
  font-weight: 500;
  margin-bottom: 4rpx;
}

.account-desc {
  color: #666;
  font-size: 24rpx;
}

.account-right {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.account-value {
  color: #666;
  font-size: 24rpx;
}

.account-arrow {
  margin-left: 8rpx;
}

// 设置项目
.setting-left {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 20rpx;
}

.setting-icon {
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  
  &.blue-icon { background: linear-gradient(135deg, #007aff, #0056d3); }
  &.purple-icon { background: linear-gradient(135deg, #6f42c1, #563d7c); }
  &.green-icon { background: linear-gradient(135deg, #28a745, #1e7e34); }
  &.orange-icon { background: linear-gradient(135deg, #fd7e14, #e55a00); }
}

.setting-title {
  color: #333;
  font-size: 28rpx;
  font-weight: 500;
}

.setting-right {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.setting-value {
  color: #666;
  font-size: 24rpx;
}

.setting-arrow {
  margin-left: 8rpx;
}

// 帮助项目
.help-item {
  justify-content: space-between;
}

.help-icon {
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  
  &.blue-icon { background: linear-gradient(135deg, #007aff, #0056d3); }
  &.green-icon { background: linear-gradient(135deg, #28a745, #1e7e34); }
  &.orange-icon { background: linear-gradient(135deg, #fd7e14, #e55a00); }
  &.purple-icon { background: linear-gradient(135deg, #6f42c1, #563d7c); }
}

.help-title {
  flex: 1;
  color: #333;
  font-size: 28rpx;
  font-weight: 500;
}

.help-arrow {
  margin-left: 20rpx;
}

// 响应式适配
@media (max-width: 750rpx) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20rpx;
  }
  
  .service-icon {
    width: 50rpx;
    height: 50rpx;
    border-radius: 25rpx;
  }
  
  .service-title {
    font-size: 22rpx;
  }
}
</style>